<template>
	<view class="container">
		<top-back-navbar position="fixed" :title="'小贝'+(isBusiness?'买入':'卖出')" background="#ffffff" color="#000000"></top-back-navbar>
		<view>
			<view class="num_box">
				<!-- <view class="num_box-left">
					<view class="num_box-leftitem">趋势图</view>
				</view> -->
				<view class="num_box-right">
					<view class="num_box-right-text text-shadow" :class="[isBusiness?'num_box-right-text-active':'num_box-right-text-import']" @click="changeItem(1)">小贝买入</view>
					<view class="num_box-right-text text-shadow" :class="[!isBusiness?'num_box-right-text-active':'num_box-right-text-import']" @click="changeItem(2)">小贝卖出</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="jy-yj">
				<view class="jy-yj-title text-shadow">业绩&交易</view>
				<view class="jy-yj-list">
					<view class="jy-yj-item yf-col-5">
						<view class="list-title text-shadow">总{{isBusiness?'买入':'卖出'}}数</view>
						<view class="list-num text-shadow">{{(isBusiness?buyObj.zong:sellObj.zong) || 0}}</view>
					</view>
					<view class="jy-yj-item padding-left yf-col-7" @click="$u.route(`/page_x/member/mxlist`)">
						<view class="list-title list-title-dis"><text class="text-shadow">可用资金</text><text class="button">明细</text></view>
						<view class="list-num text-shadow">¥{{(isBusiness?buyObj.credit2:sellObj.credit2) || 0.00}}</view>
					</view>
				</view>
				<view class="jy-yj-list">
					<view class="jy-yj-item yf-col-5">
						<view class="list-title text-shadow">今日{{isBusiness?'买入':'卖出'}}数</view>
						<view class="list-num text-shadow">{{(isBusiness?buyObj.jinri:sellObj.jinri) || 0}}</view>
					</view>
					<view class="jy-yj-item padding-left yf-col-7" @click="$u.route(`/page_x/member/mxlist`)">
						<view class="list-title list-title-dis"><text class="text-shadow">小贝数量</text><text class="button">明细</text></view>
						<view class="list-num">{{(isBusiness?buyObj.kemai:sellObj.kemai) || 0}}</view>
					</view>
				</view>
			</view>
			<view class="jy-yjs gp-group" style="margin-top: 30rpx;">
				<view class="gp-group-item"> 
					<view class="gp-group-title text-shadow gp-group-title-bg">小贝价格：¥{{(isBusiness?buyObj.huo_price:sellObj.huo_price) || '0.00'}}</view>
					<view class="gp-group-boxs">
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">{{isBusiness?'买入':'卖出'}}数量</view>
							<input class="gp-group-input" v-model="num" placeholder-class="gp-group-input-placeholder" placeholder="请输入" type="number">
							<view class="gp-group-input-num text-shadow">个</view>
						</view>
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">输入金额</view>
							<input class="gp-group-input" v-model="money" placeholder-class="gp-group-input-placeholder" placeholder="请输入" type="number">
							<view class="gp-group-input-num text-shadow">元</view>
						</view>
						<view class="gp-group-input-box">
							<view class="gp-group-input-text text-shadow">{{isBusiness?'消耗资金':'消耗资金'}}</view>
							<input v-model="total" class="gp-group-input" placeholder-class="gp-group-input-placeholder" readonly type="number">
							<view class="gp-group-input-num text-shadow">元</view>
						</view>
						<view class="gp-group-input-button text-shadow" @click="submit(1)">{{isBusiness?'确定买入':'确定卖出'}}</view>
					</view>
				</view>
				<view class="gp-group-item">
					<view class="gp-group-title text-shadow">今日可{{isBusiness?'买':'卖'}}总量：{{(isBusiness?buyObj.huo:sellObj.huo) || 0}}</view>
					<view class="gp-group-boxs">
						<view class="gp-group-header">
							<view class="gp-group-header-text text-shadow">价格(¥)</view> 
							<view class="gp-group-header-text text-shadow">数量</view>
						</view>
						<scroll-view class="gp-scroll-view" scroll-y>
							<view class="gp-group-row" v-for="(item,index) in todayList" :key="index">
								<view class="gp-group-col text-shadow" :style="{color:item.color == 'black'?'#ffffff':item.color}">{{item.price}}</view>
								<view class="gp-group-col text-shadow" style="color:#fff;">{{item.num}}</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			<view class="sale-group">
				<view class="sale-title">
					<text class="sale-title-text text-shadow">{{'小贝委托'+(isBusiness?'买入':'卖出')}}</text>
					<image mode="heightFix" src="/static/images/xfdzh/dzh_qst.png" style="height: 60rpx;"></image>
				</view>
				<view class="sale-list-height" v-if="showList.length>0">
					<view class="sale-list-col-1 sale-list-font0">名称</view>
					<view class="sale-list-col-3 sale-list-font0">日期</view>
					<view class="sale-list-col-2 sale-list-font0">委托总数</view>
					<view class="sale-list-col-2 sale-list-font0">成交数量</view>
					<view class="sale-list-col-2 sale-list-font0">委托价格</view>
					<view class="sale-list-col-2 sale-list-font0">操作</view>
				</view>
				<view class="sale-list" v-for="(item, index) in showList" :key="index">
					<view class="sale-list-col-1 sale-list-font1">矿铢</view>
					<view class="sale-list-col-3 sale-list-font2">{{item.createtime}}</view>
					<view class="sale-list-col-2 sale-list-font2">{{item.num}}</view>
					<view class="sale-list-col-2 sale-list-font2">{{item.num}}</view>
					<view class="sale-list-col-2 sale-list-font3">¥{{item.price}}</view>
					<view class="sale-list-col-2 sale-list-font4">
						<view class="buttons"  @click="submit(2,item.id)">撤销</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showList: [],
				todayList:[],
				openid: '',
				num:'',
				money:'',
				real_name: '',
				real_head_img: '',
				create_time: '',
				buyObj: {},
				sellObj:{},
				isBusiness:true
			}
		},
		computed:{
			total:function(){
				if(this.num>0 && this.money>0){
					return this.num*this.money;
				}else{
					return ''
				}
			}
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setajax()
				},
			});
		},
		methods: {
			changeItem(flag){
				this.isBusiness=flag == 1?true:false;
				this.resultMethod()
			},
			resultMethod(){
				this.num='';
				this.money='';
				this.setajax();
			},
			copyText(text) {
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功'
						})
					}
				});
			},
			// 买入卖出
			setajax() {
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_mairu&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_maichu&app=1';
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data: {
						openid: this.openid
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0 && this.lodash.isPlainObject(res.data)) {
							if(this.isBusiness){
								this.buyObj = res.data;
								this.showList=Array.isArray(res.data.buy)?res.data.buy:[];
								this.todayList=Array.isArray(res.data.buy_list)?res.data.buy_list:[];
							}else{
								this.sellObj = res.data;
								this.todayList=Array.isArray(res.data.sell_list)?res.data.sell_list:[];
								this.showList=Array.isArray(res.data.sell)?res.data.sell:[];
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			submit(flag,id){
				uni.showModal({
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮文字 
					title: '提示',
					content: '是否确定此操作?',
					success: res => {
						if (res.confirm) {
							if(flag == 1){
								this.submitMethod()
							}else{
								this.canelMethod(id)
							}
						}
					}
				});
			},
			submitMethod(){
				if(!this.num || this.num<=0){
					return uni.showToast({title: '请输入数量',icon: 'none',duration: 2000})
				}
				if(!this.money || this.money<=0){
					return uni.showToast({title: '请输入金额',icon: 'none',duration: 2000})
				}
				uni.showLoading({title: '加载中...'});
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_buy&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_sell&app=1';
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data: {
						openid: this.openid,
						num:this.num,
						price:this.money
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0) {
							uni.showToast({title: '操作成功',icon: 'success',duration: 2000})
							this.resultMethod()
						}else{
							uni.showToast({title: res.data.message,icon: 'none',duration: 2000})
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			canelMethod(id){
				uni.showLoading({title: '加载中...'});
				const url=this.isBusiness?'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_buy_no&app=1':
					  '/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.index.huo_sell_no&app=1';
				uni.request({
					url: this.$BASE_URL+url,
					method: 'POST',
					data: {
						openid: this.openid,
						id:id
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res.data);
						if (res.data.error ==0) {
							uni.showToast({title: '操作成功',icon: 'success',duration: 2000})
							this.resultMethod()
						}else{
							uni.showToast({title: res.data.message,icon: 'none',duration: 2000})
						}
					},
					fail: () => {},
					complete: () => {
						uni.hideLoading();
					}
				});
			}
			
		}
	}
</script>

<style lang="scss">
	page {
		background: url('/static/images/xfdzh/dzh_xb_bg.png') center no-repeat;
		// height: 100%;
		min-height: 100vh;
		background-size: 100% 100%;
	}

	.container {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
	}

	.content {
		padding: 0 30rpx 0 30rpx;
		// overflow: hidden;
	}
	.jy-yjs{
		
	}
	.list-title-center{
		text-align: center;
	}
	.gp-group{
		display: flex;
		.gp-group-item{
			width: 50%;
		}
		.gp-group-title{
			height: 38rpx;
			line-height: 38rpx;
			font-size: 28rpx;
			font-weight: bold;
			color:#fff;
		}
		.gp-group-title-bg{
			background: url('/static/images/xfdzh/dzh_jb.png') 20rpx 4rpx no-repeat;
			background-size: 38rpx 38rpx;
			padding-left:70rpx;
		}
		.gp-group-boxs{
			padding:30rpx 0;
		}
		.gp-group-input-box{
			height: 78rpx;
			display: flex;
			align-items: center;
			background: url('/static/images/xfdzh/dzh_mr.png') center no-repeat;
			background-size: 100% 100%;
			border-radius: 10rpx;
			padding: 10rpx 20rpx 10rpx 20rpx;
			margin-bottom: 30rpx;
		}
		.gp-group-input-text{  
			width: 110rpx;
			font-size:24rpx;
			color:#fff;
			white-space: nowrap;
		}
		.gp-group-input{
			flex:1;
			height: 100%;
			text-align: right;
			font-size: 24rpx;
			color:#fff;
			padding-right:10rpx;
		}
		.gp-group-input-placeholder{
			color:#fff;
		}
		.gp-group-input-num{
			font-size: 24rpx;
			color:#fff;
		}
		.gp-group-input-button{
			height: 90rpx;
			line-height: 90rpx;
			font-size: 28rpx;
			color:#ffffff;
			text-align: center;
			background-color: #3759a7;
			background: url('/static/images/xfdzh/dzh_mrc.png') center no-repeat;
			background-size: 100% 100%;
		}
		.gp-group-header{
			display: flex;
			align-items: center;
			padding-bottom:20rpx;
			.gp-group-header-text{
				width: 50%;
				font-size: 24rpx;
				color:#fff;
				text-align: center;
			}
		}
		.gp-scroll-view{
			width: 100%;
			height: 280rpx;
			.gp-group-row{
				display: flex;
				align-items: center;
			}
			.gp-group-col{
				width: 50%;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
			}
		}  
	} 

	.num_box {
		padding:30rpx;
		.num_box-left {
			.num_box-leftitem {
				height: 60rpx;
				text-align: center;
				border-radius: 10rpx;
				background-color: #a9a7b7;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
				width: 150rpx;
			}
		}

		.num_box-right {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.num_box-right-text {
			font-size: 32rpx;
			color: #ffffff;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-weight: bold;
			border-radius: 10rpx;
			width: 48%;
		}
		.num_box-right-text-import{
			background: url('/static/images/xfdzh/dzh_mck.png')center no-repeat;
			height: 100%;
			background-size: 100% 100%;
		}
		.num_box-right-text-active{
			background: url('/static/images/xfdzh/dzh_mmk.png')center no-repeat;
			height: 100%;
			background-size: 100% 100%;
		}

		.num_box-right-num {
			font-size: 50rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}
	.text-shadow{
		text-shadow:0 0 5rpx #574acf,0 0 10rpx #574acf,0 0 15rpx #574acf;
	}
	.jy-yj {
		margin-top: 20rpx;   
		padding: 80rpx 60rpx 40rpx 120rpx;
		border-radius: 20rpx;
		background: url('/static/images/xfdzh/dzh_chk.png') center no-repeat;
		background-size: 100% 100%;
		position: relative;
		.jy-yj-title {
			padding: 0 0 0 50rpx;
			font-size: 28rpx;
			font-weight: bold;
			position: absolute;
			top:-20rpx;
			left:4%;
			color:#ffffff;
			background: url('/static/images/xfdzh/dzh_jb.png') 0 10rpx no-repeat;
			background-size: 38rpx 38rpx;
		}

		.jy-yj-list {
			display: flex;
			align-items: center;

			.jy-yj-item {
				padding: 4rpx 0;
				line-height: 30rpx;
				.list-title-dis{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.list-title {
					padding: 6rpx 0;
					font-size: 28rpx;
					color:#ffffff;
				}

				.list-num {
					padding: 6rpx 0;
					font-size: 28rpx;
					color:#ffffff;
					font-weight: bold;
				}
				.button{
					width: 100rpx;
					height: 48rpx;
					border-radius: 48rpx;
					text-align: center;
					line-height: 48rpx;
					background: url('/static/images/xfdzh/dzh_mx.png');
					background-size: 100% 100%;
					color:#540394;
					display: inline-block;
				}
			}

			.border-left {
				border-left: 1px solid #f2f5fa;
			}

			.border-top {
				border-top: 1px solid #f2f5fa;
			}

			.padding-left {
				padding-left: 40rpx;
			}
		}
	}

	.sale-group {
		margin-top: 30rpx;
	
		.sale-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.sale-title-text{
				font-size: 28rpx;
				font-weight: bold;
				color:#ffffff;
			}
			.sale-title-button{
				
			}
		}
		.sale-list-height{
			height: 50rpx;
			display: flex;
			align-items: center;
			padding:0 4rpx;
		}
		.sale-list {
			height: 100rpx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			padding:0 4rpx;
		}
		.sale-list-col-1{
			width: 8.33%;
		}
		.sale-list-col-2 {
			width: 16.66%;
		}
		.sale-list-col-3{
			width: 23.9%;
		}
		.sale-list-font0{
			font-size: 24rpx;
			text-align: center;
			text-shadow:0 0 5rpx #574acf,0 0 10rpx #574acf,0 0 15rpx #574acf;
			color:#ffffff;
		}
		.sale-list-font1{
			font-size: 24rpx;
			text-shadow:0 0 5rpx #574acf,0 0 10rpx #574acf,0 0 15rpx #574acf;
			color:#ffffff;
			text-align: center;
		}
		.sale-list-font2{
			font-size: 24rpx;
			text-shadow:0 0 5rpx #574acf,0 0 10rpx #574acf,0 0 15rpx #574acf;
			color:#ffffff;
			text-align: center;
		}
		.sale-list-font3{
			font-size: 24rpx;
			text-shadow:0 0 5rpx #574acf,0 0 10rpx #574acf,0 0 15rpx #574acf;
			color:#ffffff;
		}
		.sale-list-font4{
			display: flex;
			align-items: flex-end;
			.buttons{
				width: 110rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 24rpx;
				color:#ffffff;
				background: url('/static/images/xfdzh/dzh_xb.png');
				background-size: 100% 100%;
			}
		}
	}
</style>
